<template>
  <div :style="style">
    <span>{{ text }}</span>
  </div>
</template>


<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps<{
  style: {
    [propsName: string]: any
  },
  text: string
}>();
const pxList = ['width', 'height', 'lineHeight', 'borderRadius']
const switchList = [{ name: 'fontWeight', value: ['normal', 'bold'] }]
const style = ref();

watch(props, (newValue) => {
  const o = {};
  Object.entries(newValue.style).map(([key, value]) => {
    if (pxList.some(v => key.toLocaleLowerCase().includes(v.toLocaleLowerCase()))) {
      o[key] = value + 'px'
    } else if (typeof value === 'object') {
      o[key] = value.value
    } else if (typeof value === 'boolean') {
      console.log(22222)
      const item = switchList.find(v => {
        console.log(v.name, key)
        return v.name === key
      })
      if (item) {
        o[key] = value ? item.value[1] : item.value[0]
        return;
      }
      o[key] = value
    } else {
      o[key] = value
    }
  })
  console.log(o)
  style.value = o
}, { immediate: true, deep: true })

</script>

<style></style>